<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8"><title>BlueBubble 3.5 Wordpress Theme Documentation</title><!-- Framework CSS -->


<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print"><!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->

<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
<style type="text/css" media="screen">
p, table, hr, .box { margin-bottom:25px; }
.box p { margin-bottom:10px; }
.titlebar {height:30px; background:#333;margin: 0 0 20px 0; text-align:center;}
.lang {display:inline-block;height:25px; width:80px; margin:4px 0 0 0;color:#fff;} .lang a {color:#fff;} </style></head>
<body>
<div class="titlebar">
<div class="lang"><strong>English</strong></div>
<div class="lang"><a href="../es/index.html">Español</a></div>
</div>
<div class="container">
<h3 class="center alt">“BlueBubble v3.5 Wordpress Theme”
Documentation by “<a href="http://algo.dosmundoscafe.com/en" title="Go to imaginalgo website." target="_blank">imaginalgo</a>”</h3>
<hr>
<h1 class="center">“BlueBubble v3.5 Wordpress Theme”</h1>
<div class="borderTop">
<div class="span-6 colborder info-top prepend-1">
<p class="prepend-top"> <strong> Created: November
11, 2011<br>
By: <a href="http://algo.dosmundoscafe.com/en" title="Go to imaginalgo website." target="_blank">imaginalgo</a><br>
Support: <a href="http://bluebubble.dosmundoscafe.com/free-theme-bluebubble-v3-0/" target="_blank">BlueBubble Support</a> </strong>
</p>
</div>
<!-- end div .span-6 -->
<div class="span-12 last">
<p class="prepend-top append-0">Thank you for your
interest in BlueBubble for Wordpress. This theme takes advantage of
many of the new features included with Wordpress 3.0, such as:
MultiSite, Custom Headers and the new Menu System.
All this while keeping the same basic layout from BlueBubble version
2.9.2. Easy to install, easy to deploy - we hope you enjoy this theme.
</p>
</div>
</div>
<!-- end div .borderTop -->
<hr>
<h2 id="toc" class="alt">Table of Contents</h2>
<ol class="alpha">
<li><a href="#new">What's New</a></li>
<li><a href="#features">BlueBubble Features</a></li>
<li><a href="#install">Installing BlueBubble</a></li>
<li><a href="#optionspanel">BlueBubble Options
Panel</a></li>
<li><a href="#portfolioblog">Setting Up Portfolio
and Blog</a></li>
<li><a href="#contact">Contact Form and Social
Sites</a></li>
<li><a href="#styles">Styles</a></li>
<li><a href="#other">Other Options</a></li>
<li><a href="#portprojects">Portfolio Projects</a></li>
<li><a href="#faqs">Help and FAQs</a></li>
<li><a href="#credits">Credits</a></li>
</ol>
<hr>
<h3 id="new"><strong>A) What's New</strong> - <a href="#toc">top</a></h3>
<p>The following is a list of changes, fixes and additions new in
version 3.5:</p>
<ul>
<li>All-new Theme Options panel with many new options.</li>
<li>Added option to upload Favicon or Logo from Theme Options.</li>
<li>Replaced <strong>Shortcodes</strong> with <strong>Styles</strong>.</li>
<li>New Portfolio layouts - 2 and 3 column with sidebar, 3 and
4 column full page.</li>
<li>Hover overlay for portfolio images.</li>
<li>New Custom Meta boxes for portfolio items - <strong>date</strong>
and <strong>link</strong>.</li>
<li>New Contact Form with custom error and success messages.</li>
<li>Removed all color schemes except for Default and Dark.</li>
<li>Updated Comments Form with new Twitter field.</li>
</ul>
<p class="alert">As of version 3.5, the BlueBubble update
notice has been moved. Notices will now appear under Dashboard, below
the Updates notice.</p>
<hr>
<h3 id="features"><strong>B) BlueBubble Features</strong>
- <a href="#toc">top</a></h3>
<p>Thank you for your interest in BlueBubble for Wordpress. This
theme has been renumbered 3.0 to coincide with Wordpress 3.0. It takes
advantage of many of the new features included with Wordpress 3.0, such
as: MultiSite, Custom Headers and the new Menu System. These are all
included "out of the box" meaning that you won't have to mess with
adding fields to the functions.php file.</p>
<p>In addition, there are several new and exciting features
included with this version, including: a new Theme Options Panel with
many new options, a logo and favicon uploader, a Colorbox pop-up for
portfolio options, share any post with Twitter and Google+ buttons, and
new Portfolio page layouts.</p>
<p>All this while keeping the same basic layout from BlueBubble
version 2.9.2. Easy to install, easy to deploy - we hope you enjoy this
theme.</p>
<p>Sincerely,</p>
<p class="append-bottom alt large"><strong>Thomas
Veit and Mike Walsh</strong></p>
<hr>
<h3 id="install"><strong>C) Installing BlueBubble</strong>
- <a href="#toc">top</a></h3>
<p class="info">The installation process is now automated
in version 3.5! When you first activate the theme, the <strong>Blog</strong>,
<strong>Portfolio</strong>, and <strong>Contact</strong>
pages will be created automatically, along with the <strong>Main,
Top, Footer</strong> and <strong>404</strong> menus!
You can skip the following steps and simply go to the <strong>Settings
&gt; Reading </strong>page and choose Portfolio for your
Front Page. <strong>DO NOT</strong> change the Posts Page
option. Now continue to the <a href="#optionspanel">BlueBubble
Options Panel</a>.<br>
<br>
If you have a problem, however, please read the following: </p>
<p>First, make sure that you have Wordpress 3.0 or later
installed. After installing Wordpress on your server, upload or copy
the <strong>bluebubble</strong> folder to the
wp-contents/themes directory. Once this is done...</p>
<ol>
<li>Login to your Wordpress admin page and activate BlueBubble
Theme. (in Wordpress 3.0, if you are using the Multi Site function,
remember that you have to first "allow" the theme in the Super Admin.</li>
<li>Create a <strong>page</strong>. Name it home
or whatever you like. Then, under<strong> Page Attributes</strong>,
where it says Template, choose <strong>Portfolio</strong>.</li>
<li>Create another <strong>page</strong>. Name it
Blog or whatever else you like. Obviously, this will be for a blog.
Then, under <strong>Page Attributes</strong>, where it
says Template, choose<strong> Blog</strong>.</li>
<li>If you would like to use the BlueBubble contact form,
simply create a new page and name it Contact. (or something else) Then,
under <strong>Page Attributes</strong>, where it says
Template, choose <strong>Contact</strong>.</li>
<li>Now, go to the <strong>Settings -&gt; Reading</strong>
page and choose the Portfolio page you created in #2 as the Front page.
<strong><span class="highlight">Note: DO NOT set
the Posts page to your Blog page - leave it empty.</span></strong></li>
<li>After that, go to <strong>Posts -&gt; Categories</strong>
and create two new categories. You might name them Portfolio and Blog,
but can be named whatever you like. These will be used to populate the
pages you created in #2 and #3 with posts.</li>
<li>To create the <strong>Main Navigation</strong>:
<ul>
<li>Go to <strong>Appearance -&gt; Menus</strong>.
Where it says Menu Name: Enter Menu Name Here, type a name - whatever
you like. Click <strong>Create a Menu</strong>.</li>
<li>To make life easier later, check the box next to <strong>Automatically
add new top-level pages</strong>.</li>
<li>To the left, you should now see Theme Locations: Your
theme supports 2 menus. Select which menu appears in each location. In
the drop-down menu under Main Navigation Menu, choose <strong>Menu</strong>.</li>
<li>Below this you will find a box with the title Pages.
Click the boxes next to the pages you want to add to the menu, and then
click <strong>Add to Menu</strong>. You can change the
order of the pages in the menu by dragging them to where you like.</li>
</ul>
</li>
<li>BlueBubble also allows you to create a simple menu in the
footer of the site. It is independent of the main navigation menu. To
create a footer menu, follow the same steps as in #7, but where it says
Menu Name: Enter Menu Name Here, type <strong>Footer</strong>.
(or whatever name you like)</li>
<li>In addition, BlueBubble features a 404 Error page that can
help lost users stay on your website. On the bottom of the 404 Error
page, you can display a menu of links that you want your user to
follow. Simply follow the same instructions in #7, but name this menu <strong>404</strong>.
(or whatever name you like)</li>
<li>Finally, under <strong>Appearance</strong> you
should see an link named Theme Options. Click here to open the <strong>Theme
Options Panel</strong>.</li>
</ol>
<hr>
<h3 id="optionspanel"><strong>D) BlueBubble Options
Panel</strong> - <a href="#toc">top</a></h3>
<p>The BlueBubble Options Panel has been redesigned in version
3.5. It has also been relocated to <strong>Appearance &gt;
Theme Options</strong>. </p>
<img src="assets/images/optionspanel.png" alt="BlueBubble Options Panel">
<p>Each option has a detailed explanation. Some new options in
BlueBubble 3.5 include:</p>
<ul>
<li><strong>Logo &amp; Favicon Uploader</strong>:
Click a button, select an image from your computer, and it is
automatically uploaded!</li>
<li><strong>Text-Only Logo</strong>: You can choose
to have a text-only logo instead of an image.</li>
<li><strong>WP Dashboard</strong>: Do you find
some/all of the Wordpress Dashboard widgets annoying or unnecessary?
Here you can choose to deactivate some or all of them!</li>
<li><span style="font-weight: bold;">Contact Form:
</span>The contact form and the email it sends have been
changed in this version. If there is an error in one of the fields, a
general error message will appear at the top, and a specific error
message will appear below the field. You can now customize these error
messages, as well as create a thank-you message.</li>
</ul>
<hr>
<h3 id="portfolioblog"><strong>E) Setting Up The
Portfolio and Blog</strong> - <a href="#toc">top</a></h3>
<p class="info">Because the page and menu creation in
BlueBubble 3.5 are automatic, most of the following instructions are
unnecessary. However, you may want to refer to them if you had problems
creating a menu and/or pages,or if you like reading technical<br>
<br>
To set up a Portfolio, simply go to <span style="font-weight: bold;">Theme
Options &gt; Portfolio</span> and select the Portfolio
Category you want to use. To set up the Blog, click <span style="font-weight: bold;">Theme Options &gt;Blog and
Posts</span> and choose the Blog category you want.&nbsp;<br>
<br>
Then skip to the next section,&nbsp;<a href="#contact">Contact
Form and Social Sites</a>.</p>
<p>This section is pretty simple. Remember when you created your
main page and blog page categories in step 2.5? Well, if you did this,
then they will appear in the two drop-down menus in this section. Here
you connect the pages you created in steps 2.2 and 2.3 with the
categories you created in step 2.5.</p>
<p>The check box is quite simple - if you don't want users to be
able to leave comments on your portfolio pages, check the box. (<strong>Note</strong>:
Even with the box checked, people can still post to your Blog section)</p>
<p>Beginning with BlueBubble 3.1, you can also turn on and off
the lightbox feature for Portfolio items. When turned off, clicking on
the image will take you to the detailed portfolio page - the same as
clicking Details in the text below the photo.</p>
<p>You can also indicate from the BlueBubble Admin panel how many
Portfolio items you would like to appear on each page. If you enter
nothing, it will show 6 items per page and automatically create other
page(s) if there are more than 6 items.</p>
<hr>
<h3 id="contact"><strong>F) Contact Form and Social
Sites</strong>
- <a href="#toc">top</a></h3>
<p>The BlueBubble contact form now allows you to customize the
error and thank-you messages. Go to <span style="font-weight: bold;">Appearance
&gt; Theme Options &gt; Contact Form</span> and add the
messages you want to appear when there is an error on the Contact Form.
Don't forget to enter an email address at which
you wish to receive email from the form, and save. If you do not enter
an email address, all contact form emails will automatically be sent to
the administrator's email account.</p>
<p>Under the <span style="font-weight: bold;">Contact
Form</span> tab in the Theme Options, yo can click <span style="font-weight: bold;">Social Icons</span>.&nbsp;There is a series of
spaces related to Social Media. If you would like to enter an icon
link, for example, to your Twitter account, follow these two steps:</p>
<ol>
<li> Check the box that says <strong>Show Social Sites
Section</strong>. </li>
<li>Now, simply add the complete URL to your account. (<strong>Ex</strong>:
if your Twitter username was johndoe, you would enter<strong>
http://www.twitter.com/johndoe</strong> in the Twitter field.)
The icon will appear at the bottom of the left sidebar. </li>
</ol>
<p class="update">There are 2 new options in BlueBubble
3.5: Google+ and Dribble</p>
<p>The Social Sites options are:<strong>
Google+, Dribble Facebook, Twitter, LinkedIn, Delicious, Digg,
DeviantArt, MySpace,
Evernote, Flickr, Netvibes, Orkut, Reddit, ShareThis, StumbleUpon,
Technorati,</strong> and <strong>Tumblr</strong>. </p>
<hr>
<h3 id="styles"><strong>G) Styles</strong>
- <a href="#toc">top</a></h3>
<p>In previous versions of BlueBubble, you were able to create <span style="font-weight: bold;">Buttons</span> and <span style="font-weight: bold;">Alert</span>, <span style="font-weight: bold;">Info</span>, <span style="font-weight: bold;">Idea</span> or <span style="font-weight: bold;">Download</span>
boxes using Shortcodes. The only problem with that was if you later
switched to a different theme, you needed to erase the
[shortcode][/shortcode] tags that were created</p><p>In BlueBubble 3.5, the currently popular Shortcodes have been replaced with Styles. This change allows you to create the same <span style="font-weight: bold;">Buttons</span> and <span style="font-weight: bold;">Alert</span>, <span style="font-weight: bold;">Info</span>, <span style="font-weight: bold;">Idea</span> or <span style="font-weight: bold;">Download</span> boxes as before, but without the extra&nbsp;[shortcode][/shortcode] text. In addition, there is a new <span style="font-weight: bold;">Gray Button</span> as well <span style="font-weight: bold;">1/2 and 2/3 Columns</span>. &nbsp;Here is a brief explanation of how to use the new Styles:</p>
<ol>
<li><strong>Create a new Page or Post</strong>:
<p>First you should create a new post. In the text editor, there is a line of buttons below:</p>
<img src="assets/images/editor-bar.png" alt="BlueBubble Options Panel">
<p>If you only see one row of buttons, click the last button - The Kitchen Sink - to display the second row. The first menu below should say Styles.</p>
</li>
<li><strong>Applying the Styles</strong>: <p>If you would like to create a button, first highlight the text in the editor. Next, use the Styles menu and click the color button you want. It will automatically change to a button. You can then add a link to the button!</p>
<img src="assets/images/styles-help.png" alt="BlueBubble Options Panel"></li>
</ol>
<hr>
<h3 id="other"><strong>H) Other Options</strong>
- <a href="#toc">top</a></h3>
<p>In addition to the options mentioned earlier, there are some
other options that, while not strictly necessary, can help you enjoy
more your experience with the BlueBubble theme.</p>
<p><strong>Custom Logo</strong>: To replace the
BlueBubble logo with your own, simply upload an image from the Media
option, copy the URL and paste it in the option field.</p>
<p><strong>Custom Favicon</strong>: Same process as
Custom Logo. Paste the URL in the second option field. Note: your
Favicon should be in .ico format, although some browsers also allow .png</p>
<p><strong>SEO Fields</strong>: Under Search Engine
Optimization you can add a Meta Tag Description, Meta Keywords, or a
Google Analytics tracking code. Simply follow the instructions provided
under this option in the control panel.</p>
<p><strong>Custom User Fields</strong>: BlueBubble
has added a few fields to the User Profile defaults provided in
Wordpress. Enjoy!</p>
<p><strong>Shortcodes</strong>: There are two types
of shortcodes as of BlueBubble 3.2 - text boxes and buttons. Shortcodes
are short code brackets that you can add while publishing that add new
features. As of version 3.5, the shortcodes have been added to the
Wordpress Write Panel. So you can click on the button with a green or
blue dot to automatically insert the shortcode for a blue or green
button. </p>
<p><strong>Author Profile Box</strong>: From the blog
section, you can click on the name of the author to see a separate page
with the author's user profile information as well as a list of all
their posts.</p>
<p><strong>Custom Author Photo</strong>: It is
possible to use a Wordpress Plugin to allow users to upload a custom
photo, but there is another way. Upload a photo to the
wp-content/themes/BlueBubble/images/authors/ folder with the same name
as your user ID and in .jpg format. (to see your User ID number, select
Users -&gt; Users from the admin page, and hover over the name of
the user desired. In the URL that appears in the bottom of your browser
you should see user_id=#. That number is the user ID. The administrator
has user ID 1.) For example, the administrator would upload 1.jpg. The
ideal size is 100x100.</p>
<hr>
<h3 id="portprojects"><strong>I) Portfolio Projects</strong>
- <a href="#toc">top</a></h3>
<p>If you have followed the steps above, adding an item to your
portfolio is easy! Follow these steps:</p>
<ol>
<li>Go to <strong>Posts -&gt; Add New</strong>.</li>
<li>Type a title and a description for the item. Then click on <strong>Upload/Insert</strong>
icon to Add Media.</li>
<li>Select the image you want to use for your portfolio, and
upload. The BlueBubble theme automatically crops two sizes - one for
the portfolio page thumbnail, and one for the single portfolio item.
(larger image)</li>
<li>After uploading, you will see options for Title, Caption,
Image URL, etc... At the bottom of the page, click the link <strong>Use
as featured image</strong>. (it is not necessary to insert the
image into the post)</li>
</ol>
<p>If you are having trouble setting up a Portfolio or Blog,
please read the other Help file which came with this theme.</p>
<hr>
<h3 id="faqs"><strong>J) Help and FAQs</strong>
- <a href="#toc">top</a></h3>
<p>The following are some frequently asked questions or confusing
points. Please please read this document before asking questions on the
BlueBubble page!</p>
<ul>
<li><strong>Why doesn't the new author information box
appear above my posts?</strong>
In order to have this box appear, you need to fill out the Biographical
Info section of your Wordpress user profile.</li>
<li><strong>How do I assign a custom photo with my
comments and posts?</strong> In order to show a custom image, you
need to have uploaded a photo to your gravatar account.
</li>
<li><strong>What is a gravatar?</strong>
A gravatar is a Global Avatar. In other words, the little image you see
next to posts on blogs all over the internet. In order to get one,
simply go to <a href="http://www.gravatar.com" target="_blank">http://www.gravatar.com</a>. You will
register your email address, and then you can upload a photo.
</li>
<li><strong>I did this and it still does not work.</strong>
Make sure that the email address you registered with Gravatar is the
same that you are using to leave a comment on the BlueBubble theme.
</li>
<li><strong>I am the author of a post on BlueBubble, but
when I leave a message or reply to another user, it does not show my
comment in a different color.</strong>
You must be logged in when you leave the comment or reply for your
comment to show in the special author color.
</li>
<li><strong>How do I change BlueBubble to Spanish?</strong>
First, you must have Wordpress installed in Spanish OR have the
language files installed. (read about this on the Wordpress.org
website) After this is done, go to Settings =&gt; General. The last
option allows you to select the language of your theme. Choose Spanish.
</li>
</ul>
<hr>
<h3 id="credits"><strong>K) Credits</strong> -
<a href="#toc">top</a></h3>
<p>It was a lot of fun to work with this theme, adding some fun
new features to an already wonderful Wordpress theme. But, I couldn't
have done it with my own knowledge and artwork, so I would like to
thank the following for the necessary inspiration and knowledge:</p>
<ul>
<li>My wife and her patience.</li>
<li>My coffee, for being plentiful.</li>
<li>The music of Silvio Rodriguez, which kept me company many a
long night</li>
<li><a href="http://www.wordpress.org" target="_blank">Wordpress</a>,
for their awesome CMS/Blog software, especially now with version 3.0!</li>
<li><a href="http://www.iconspedia.com/icon/error-1168.html" target="_blank">Iconspedia</a>, for their free
Exclamation Mark icon, used on the 404 Error page. Visit website.</li>
<li><a href="http://www.thomasveit.com" target="_blank">Thomas Veit</a>, for creating the
original BlueBubble Wordpress theme. Simple, and elegant. Check it out:</li>
<li>NetTuts, for an excellent tutorial on creating <a href="http://net.tutsplus.com/tutorials/wordpress/how-to-create-a-better-wordpress-options-panel/" target="_blank">Advanced Wordpress Panels</a>. Check
it out:</li>
<li>NetTuts again, this time for a tutorial on <a href="http://net.tutsplus.com/tutorials/php/404403-website-error-pages-with-php-auto-mailer/" target="_blank">creating a simple 404 Error Page</a>.
(This Wordpress theme excludes the auto-mailer): </li>
<li><a href="http://www.woothemes.com/2009/09/woofunction/" target="_blank">WooThemes</a>, for the cool icons they
offer. Their lightbulb icon is used in the Admin Option Panel for
BlueBubble. Check out their icons at:</li>
<li><a href="http://www.malistudio.hr/" target="_blank">Mali Studio</a>, for fixing the error
on the Portfolio page which would not show more than one page of items.</li>
<li><a href="http://www.woothemes.com" target="_blank">WooThemes</a>,
for the design inspiration used to redesign the Options Panel.</li>
</ul>
<hr>
<p>Again, thank you for downloading and using this theme. Feel
free to post s question at the <a href="http://bluebubble.dosmundoscafe.com/free-theme-bluebubble-v3-0/" target="_blank">BlueBubble Support Forum</a> if you
have any questions.</p>
<p class="append-bottom alt large"><strong>imaginalgo</strong></p>
<p><a href="#toc">Table of Contents</a></p>
<hr class="space"> </div>
<!-- end div .container -->
</body></html>